<template>
  <div class="main-nav">
    <div class="user-info">
      <img src="../../../static/image/main/user.png" alt="" class="info-img">
      <div class="info-text">
        <div class="welcom">
          <span style="margin-right: 8px">你好</span>{{user ? user.loginName : ''}}
        </div>
        <div class="role">{{role.length !== 0 ? role[0].name : ''}}</div>
      </div>
    </div>
    <img class="line" src="../../../static/image/main/line.png" alt="">
    <!--导航树-->
    <ul class="tree">
      <li v-for="(menu, index) in navMenu" :key="index" @click="toggle(menu)">
        <div class="tree-menu" :class="{
      'p-active': $route.path === menu.url,
       'p-c-active': childActive(menu)}" @mouseover="mouseover(menu)" @mouseout="mouseout(menu)">
          <img :src="getSrc(menu)" alt="" :class="iconClass" :ref="`${iconClass}-${menu.id}`">
          <span :class="pnameClass" :ref="`${pnameClass}-${menu.id}`">{{menu.name}}</span>
          <img :src="getArrow(menu)" alt="" v-if="menu.children.length !== 0" :class="arrowClass" :ref="`${arrowClass}-${menu.id}`">
        </div>
        <el-collapse-transition>
          <ul class="tree-inline" v-if="menu.children.length !== 0" v-show="menu.expand">
            <li v-for="(child, index) in menu.children" :key="index" @click.stop="navTo(child.url)">
              <div class="tree-menu-inline" :class="{'s-c-active': childActive(menu), 'c-active': $route.path === child.url}">{{child.name}}</div>
            </li>
          </ul>
        </el-collapse-transition>
      </li>
    </ul>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'NavMenu',
    data () {
      return {
        // 导航树配置
        iconClass: 'icon',
        pnameClass: 'p-name',
        arrowClass: 'arrow',
        // 导航树默认数据
        navMenu: [
        //   // {
        //   //   children: [],
        //   //   id: '1',
        //   //   name: `地图展示`,
        //   //   picUrl: `map.png,map-active.png`,
        //   //   pid: null,
        //   //   url: `/show/location`
        //   // },
        //   // {
        //   //   children: [
        //   //     {
        //   //       children: [],
        //   //       id: '21',
        //   //       name: `设备信息`,
        //   //       picUrl: ``,
        //   //       pid: 2,
        //   //       url: `/device/status`
        //   //     },
        //   //     {
        //   //       children: [],
        //   //       id: '22',
        //   //       name: `报警信息`,
        //   //       picUrl: ``,
        //   //       pid: 2,
        //   //       url: `/alarm`
        //   //     }
        //   //   ],
        //   //   id: '2',
        //   //   name: `信息展示`,
        //   //   picUrl: `infoshow.png,infoshow-active.png`,
        //   //   pid: null,
        //   //   url: `/device`,
        //   //   expand: false
        //   // },
        //   // {
        //   //   children: [
        //   //     {
        //   //       children: [],
        //   //       id: '31',
        //   //       name: `出库管理`,
        //   //       picUrl: ``,
        //   //       pid: 3,
        //   //       url: `/device/manage`
        //   //     },
        //   //     {
        //   //       children: [],
        //   //       id: '32',
        //   //       name: `设备变更`,
        //   //       picUrl: ``,
        //   //       pid: 3,
        //   //       url: `/device/change`
        //   //     },
        //   //     // {
        //   //     //   children: [],
        //   //     //   id: '32',
        //   //     //   name: `安装数据`,
        //   //     //   picUrl: ``,
        //   //     //   pid: 3,
        //   //     //   url: ``
        //   //     // },
        //   //     // {
        //   //     //   children: [],
        //   //     //   id: '33',
        //   //     //   name: `退库管理`,
        //   //     //   picUrl: ``,
        //   //     //   pid: 3,
        //   //     //   url: ``
        //   //     // }
        //   //   ],
        //   //   id: '3',
        //   //   name: `设备管理`,
        //   //   picUrl: `device.png,device-active.png`,
        //   //   pid: null,
        //   //   url: `/device/manage`,
        //   //   expand: false
        //   // },
        //   // // {
        //   // //   children: [],
        //   // //   id: '4',
        //   // //   name: `监控中心`,
        //   // //   picUrl: `detection.png,detection-active.png`,
        //   // //   pid: null,
        //   // //   url: `/detection-center`
        //   // // },
        //   // {
        //   //   children: [
        //   //     {
        //   //       children: [],
        //   //       id: '51',
        //   //       name: `人员设置`,
        //   //       picUrl: ``,
        //   //       pid: 5,
        //   //       url: `/system/user`
        //   //     },
        //   //     {
        //   //       children: [],
        //   //       id: '52',
        //   //       name: `信息设置`,
        //   //       picUrl: ``,
        //   //       pid: 5,
        //   //       url: `/system/info`
        //   //     },
        //   //     {
        //   //       children: [],
        //   //       id: '53',
        //   //       name: `角色设置`,
        //   //       picUrl: ``,
        //   //       pid: 5,
        //   //       url: `/system/role`
        //   //     },
        //   //     {
        //   //       children: [],
        //   //       id: '54',
        //   //       name: `模块设置`,
        //   //       picUrl: ``,
        //   //       pid: 5,
        //   //       url: `/system/module`
        //   //     },
        //   //     {
        //   //       children: [],
        //   //       id: '55',
        //   //       name: `资源设置`,
        //   //       picUrl: ``,
        //   //       pid: 5,
        //   //       url: `/system/resource`
        //   //     }
        //   //   ],
        //   //   id: '5',
        //   //   name: `系统设置`,
        //   //   picUrl: `system.png,system-active.png`,
        //   //   pid: null,
        //   //   url: `/system`,
        //   //   expand: false
        //   // }
        ],
      }
    },
    computed: {
      ...mapGetters('user', {
        module: 'dealedModule',
        user: 'getUser',
        role: 'getRole',
        district: 'getDistrict'
      })
    },
    watch: {
      module: {
        handler (val) {
          this.navMenu = JSON.parse(JSON.stringify(val))
          if (!Array.isArray(this.navMenu) || this.navMenu.length === 0) {
            throw new Error('this.navMenu is 空数组')
          }
          // console.log(this.navMenu)
          this.highlightNow()
        },
        deep: true
      }
    },
    mounted () {
      this.navMenu = JSON.parse(JSON.stringify(this.module))
      if (!Array.isArray(this.navMenu) || this.navMenu.length === 0) {
        throw new Error('this.navMenu is 空数组')
      }
      this.highlightNow()
      // console.log('user ', this.user)
      // console.log('district ', this.district)
      // console.log('role', this.role)
      // console.log('module', this.module)
      // console.log('navMenu', this.navMenu)
    },
    methods: {
      /**
       * 获取导航菜单的非激活或者激活图标url
       * @param {JSON} menu
       * @return {String}
       * */
      getSrc (menu) {
        let prefix = `../../../static/image/main/`
        const urlStr = menu.picUrl || ''
        if (!urlStr.includes(',')) {
          return urlStr
        }
        const srcArr = urlStr.split(',')
        if (menu.children.length !== 0) {
          return this.childActive(menu) ? prefix + srcArr[1] : prefix + srcArr[0]
        }
        return this.$route.path === menu.url ? prefix + srcArr[1] : prefix + srcArr[0]
      },
      /**
       * 获取箭头图片
       * @param {JSON} menu
       * @return {String}
       * */
      getArrow (menu) {
        let prefix = `../../../static/image/main/`
        if (menu.expand) {
          prefix += 'down'
        } else {
          prefix += 'up'
        }
        return this.childActive(menu) ? `${prefix}-active.png` : `${prefix}.png`
      },
      /**
       * 跳转路由
       * @param {String} path
       * */
      navTo (path) {
        this.$router.push({
          path
        })
      },
      /**
       * dom加载完成,展开当前路由是子节点的菜单
       * */
      highlightNow () {
        this.navMenu.some(item => {
          if (this.childActive(item)) {
            item.expand = true
            return true
          }
        })
      },
      /**
       * 展开当前，关闭其他
       * @param {JSON} menu
       * */
      toggle (menu) {
        if (menu.expand === undefined) {
          this.$router.push({
            path: menu.url
          })
          return
        }
        menu.expand = !menu.expand
        // this.navMenu.forEach(item => {
        //   if (item.id !== menu.id && item.expand !== undefined) {
        //     item.expand = false
        //   }
        // })
      },
      /**
       * 判断子节点是否匹配当前的路由
       * @param {JSON} menu
       * @return {Boolean}
       * */
      childActive (menu) {
        if (menu.expand === undefined) {
          return
        }
        let temBool = false
        menu.children.some(item => {
          if (this.$route.path === item.url) {
            temBool = true
            return true
          }
        })
        return temBool
      },
      /**
       * 鼠标移入一级菜单
       * @param {JSON} menu
       * */
      mouseover (menu) {
        const nodes = this.getNodes(menu)
        nodes.forEach(node => {
          if (node.tagName === 'IMG') {
            this.highlightImg(node)
          } else {
            this.highlightSpan(node)
          }
        })
      },
      /**
       * 鼠标移出一级菜单
       * @param {JSON} menu
       * */
      mouseout (menu) {
        const nodes = this.getNodes(menu)
        nodes.forEach(node => {
          if (node.tagName === 'IMG') {
            this.cancelHighlightImg(node)
          } else {
            this.cancelHighlightSpan(node)
          }
        })
      },
      /**
       * 获取一级菜单dom中的子节点
       * @param {JSON} menu
       * @return {Array} nodes
       * */
      getNodes (menu) {
        const id = menu.id
        const nodes = []
        const icon = this.$refs[`${this.iconClass}-${id}`][0]
        const pname = this.$refs[`${this.pnameClass}-${id}`][0]
        nodes.push(icon)
        nodes.push(pname)
        if (this.$refs[`${this.arrowClass}-${id}`]) {
          const arrow = this.$refs[`${this.arrowClass}-${id}`][0]
          nodes.push(arrow)
        }
        return nodes
      },
      /**
       * 高亮当前图片
       * @param {DOM} img
       * */
      highlightImg (img) {
        if (img.getAttribute('src').indexOf('active') > 0) {
          return
        } else {
          const index = img.getAttribute('src').indexOf('.png')
          const url = img.getAttribute('src').slice(0, index) + `-active.png`
          img.setAttribute('src', url)
        }
      },
      /**
       * 取消高亮当前图片
       * @param {DOM} img
       * */
      cancelHighlightImg (img) {
        if (img.parentNode.className.includes(`p-c-active`) || img.parentNode.className.includes(`p-active`)) {
          return
        }
        if (img.getAttribute('src').indexOf('active') < 0) {
          return
        } else {
          const index = img.getAttribute('src').indexOf('-active.png')
          const url = img.getAttribute('src').slice(0, index) + `.png`
          img.setAttribute('src', url)
        }
      },
      /**
       * 高亮当前文本
       * @param {DOM} span
       * */
      highlightSpan (span) {
        if (span.parentNode.className.includes(`p-c-active`) || span.parentNode.className.includes(`p-active`)) {
          return
        }
        span.parentNode.className += ` white`
      },
      /**
       * 取消高亮当前文本
       * @param {DOM} span
       * */
      cancelHighlightSpan (span) {
        if (span.parentNode.className.includes(`p-c-active`) || span.parentNode.className.includes(`p-active`)) {
          return
        }
        if (span.parentNode.className.includes(`white`)) {
          var reg = new RegExp('(\\s|^)' + `white` + '(\\s|$)')
          span.parentNode.className = span.parentNode.className.replace(reg, ' ')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main-nav {
    .user-info {
      margin: 30px 0 30px 30px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .info-img {
        width: 50px;
        height: auto;
        margin-right: 12px;
      }
      .info-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        .welcom {
          font-size: 14px;
          margin-bottom: 5px;
        }
        .role {
          font-size: 12px;
        }
      }
    }
    .line {
      display: inline-block;
      margin: 0 0 12px 30px;
    }
    .tree {
      color: #938A8A;
      font-size: 14px;
      .tree-menu {
        position: relative;
        display: flex;
        align-items: center;
        height: 46px;
        line-height: 46px;
        padding: 0 20px 0 30px;
        cursor: pointer;
        .icon {
          display: inline-block;
          width: 14px;
          margin-right: 12px;
        }
        .arrow {
          display: inline-block;
          width: 8px;
          height: 4px;
          position: absolute;
          top: 50%;
          right: 20px;
          margin-top: -7px;
        }
        &:hover {
          color: #fff;
        }
      }
      .p-active {
        background-color: #1F1C1C;
        color: #fff;
      }
      .p-c-active {
        background-color: #1F1C1C;
        color: #fff;
      }
      .tree-inline {
        .tree-menu-inline {
          height: 46px;
          line-height: 46px;
          padding: 0 0 0 55px;
          min-width: 200px;
          cursor: pointer;
          &:hover {
            background-color: #EB3838;
            color: #fff;
          }
        }
        .s-c-active {
          background-color: #1F1C1C;
        }
        .c-active {
          background-color: #EB3838;
          color: #fff;
        }
      }
      .white {
        color: #fff
      }
    }
  }
</style>
